// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import flexible from './assets/js/flexible.js';
import css from './assets/css/reset.css';
import Vue from 'vue';
import App from './App';
import router from './router/router.js';
import resource from 'vue-resource';
import Vuex from 'vuex';
import VueLazyLoad from 'vue-lazyload';

Vue.use(VueLazyLoad,{
	loading: '/static/img/loading.gif'
})

Vue.use(Vuex);
Vue.use(resource);
Vue.config.productionTip = false;
//自定义指令 
Vue.directive('scroll',{
	bind(el,binding){
		var homeHead,appbar;
		el.addEventListener('scroll',function(e){
			homeHead = el.parentNode.querySelector('#header');
			appbar = el.querySelector('#app-bar');
			if (el.scrollTop>=appbar.offsetHeight) {
				
				homeHead.className = 'active';
			} else {
				
				homeHead.className = '';
			}
			
	    })
	}
});
//home页头部input搜索框的自定义指令
Vue.directive('scroll',{
	bind(el,binding){
		var homeHead,appbar;
		el.addEventListener('scroll',function(e){
			e = e || event;
			homeHead = el.parentNode.querySelector('#header');
			appbar = el.querySelector('#app-bar');
			if(el.scrollTop>=appbar.offsetHeight){
				homeHead.className = 'active';
			}else{
				homeHead.className = '';
			}
		})
	}
})
//商品详情页面的 头部 改变自定义指令事件

//这里改变样式的时候不是直接再js里面改变样式,而是提前定义好类名,在满足条件的时候赋予类名即可;
Vue.directive('scrollo',{
	bind(el,binding){
		var detailHead,appbar,back,cart;
		el.addEventListener('scroll',function(e){
			detailHead = el.parentNode.querySelector('div');
			appbar = el.querySelector('#app-bar');
			back = el.parentNode.querySelector('#back-icon');
			cart = el.parentNode.querySelector('#cart-icon');
			if(el.scrollTop>=appbar.offsetHeight){
				detailHead.className = 'details-hd-active';
				back.className = 'back-icon-next';
				cart,className = 'cart-icon-next';
			}else{
				back.className = 'back-icon';
				cart.className = 'back-icon';
				detailHead.className = 'detail-hd'
			}
		})
	}
});
//vue里面建议的是尽量减少dom操作,但是有必要的时候必须通过dom操作来实现基本的功能和样式
Vue.directive('scrollo',{
	bind(el,binding){
		var detailHead,appbar,back,cart;
		el.addEventListener('scroll',function(){
			detailHead = el.parentNode.querySelector('div');
			back = el.parentNode.querySelector('#back-icon');
			cart = el.parentNode.querySelector('#cart-icon');
			appbar = el.querySelector('#app-bar');
			if (el.scrollTop>=appbar.offsetHeight) {
				detailHead.className = 'details-hd-active';
				back.className = 'back-icon-next';
				cart.className = 'cart-icon-next'
			} else {
				back.className = 'back-icon';
				cart.className = 'cart-icon';
				detailHead.className = 'detail-hd';
			}
		})
	}
})

Vue.directive('aaa',{
	bind(el,binding){
		var detailHead,appbar,back,cart;
		el.addEventListener('scroll',function(){
			detailHead = el.parentNode.querySelector('div');
			back = el.parentNode.querySelector('#back-icon');
			cart = el.parentNode.querySelector('#cart-icon');
			appbar = el.querySelector('#app-bar');
			if (el.scrollTop>=appbar.offsetHeight) {
				detailHead.className = 'details-hd-active';
				cart.className = 'cart-icon-next';
				back.className = 'back-icon-next';
			} else {
				back.className = 'back-icon';
				cart.className = 'cart-icon';
				detailHead.className = 'detail-hd'
			}
		})
	}
})
//vuex 的基本用法  state(公共状态的和数据的存储),  mutations (commit), actions (dispatch)  ,    getters(计算属性)
const store = new Vuex.Store({
	//state  存储的状态
	state: {
		id: 0,
		hotsellData: {
			id:82,
			data: []
		},
		themeId:44,
		catelistId: "107^mb",
		productDetailData: {
			id: 0,
			data: {}
		},
		cartData: {},
		totalPrice: 0,
		flag: true,
		arr: []
		
	},
	//行为，对状态进行改变，是静态行为
	mutations: {
		changeData(state,id){
			state.id = id;
		},
		changeHotsellData(state,opt){
			state.hotsellData = opt;
			// console.log(state.hotsellData);
		},
		changeThemeId(state,id){
			state.themeId = id;
		},
		changeCateId(state,id){
			state.catelistId = id;
		},
		changeDetailId(state,opt){
			state.productDetailData = opt;
			// console.log(state.productDetailData.data)
		},
		addCart(state,item){
			if (state.arr.indexOf(item) == -1) {
				var newPrice = parseInt(item.cost_price)+'.'+0+0;
				item.cost_price = newPrice;
				state.cartData[item.pid] = item;
			} else {
				state.arr.push(item);
			}
		},
		addNum(state,opt){
			state.cartData[opt.i.pid].num ++;
			state.totalPrice += parseInt(state.cartData[opt.i.pid].cost_price)
		},
		reduceNum(state,opt){
			if (state.cartData[opt.i.pid].num>1) {
				state.totalPrice -= parseInt(state.cartData[opt.i.pid].cost_price)
				state.cartData[opt.i.pid].num--;
				if (state.cartData[opt.i.pid].num<=1) {
					state.cartData[opt.i.pid].num = 1;
					return 
				}
			}
		},
		totalPrice(state,i){
			if (i.status) {
				state.totalPrice += state.cartData[i.pid].num * parseInt(state.cartData[i.pid].cost_price);
			} else {
				state.totalPrice -= state.cartData[i.pid].num * parseInt(state.cartData[i.pid].cost_price);
			}
		},
		danxuan(state){
			for(var i in state.cartData){
				if (!state.cartData[i].status) {
					state.flag = false;			
					return
				}
			}
			state.flag = true;

		},
		quanxuan(state,abc){
			if (abc) {
				for( var i in state.cartData){
					state.totalPrice += state.cartData[i].num * parseInt(state.cartData[i].cost_price);
				}
			} else {
				state.totalPrice = 0;
			}
			for(var i in state.cartData){
				state.cartData[i].status = abc;
			}
		}
	},
	//行为，对状态进行改变，异步行为
	actions: {
		
	},
	//计算属性
	getters: {
		send(state){
			return state.cartData;
		},
		totalPrice(state){
			return state.totalPrice;
		},
		danxuan(state){
			return state.flag;
		}
	}
})


/* eslint-disable no-new */
new Vue({
  	el: '#app',
 	render: function(h){
		return h(App);
	},
	VueLazyLoad,
	router,
	resource,
	store
})
